<template>
  <div class="goodsClassdetails bg-hex-fff">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff px-28rpx pb-32rpx">
      <div class="z-999 flex items-center justify-between" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
        <uni-icons type="back" size="28" />
        <span class="flex-1 text-36rpx" style="text-align: center;">搜索</span>
      </div>
      <div class="mt-32rpx flex items-center">
        <div class="relative w-full">
          <input
            v-model.trim="searchVal"
            class="h-68rpx rounded-50 bg-hex-f5f5f5 pl-100rpx"
            placeholder-class="text-hex-CBCBCBFF text-26rpx font-400"
            type="text"
            placeholder="输入关键字搜索" @confirm="onKeyboardConfirm">
          <div class="absolute left-32rpx top-50% h-40rpx w-40rpx translate-y-(-50%)">
            <image :src="`${cdnUrl}/imgs/shop/goodsSearchicon.png${imgVersion}`" mode="scaleToFill"
                   class="h-44rpx w-44rpx" />
          </div>
        </div>
        <div
          class="flex-1 whitespace-nowrap pl-32rpx pr-20rpx text-28rpx text-hex-999"
          @click="goback">
          取消
        </div>
      </div>
    </div>
    <div class="box-border rounded-t-32rpx pt-32rpx">
      <div class="mx-32rpx">
        <div v-if="goodsList.length>0">
          <div v-for="(item, index) in goodsList" class="item mb-32rpx h-180rpx flex items-center" @click="navTo(`/pages-tea/details?productId=${item.productId}`)">
            <div 
              class="relative mr-3% mt-24rpx h-180rpx w-180rpx overflow-hidden rounded-16rpx">
              <image
                class="absolute left-50% top-50% h-180rpx w-180rpx rounded-16rpx"
                style="transform: translate(-50%, -50%);" :src="item.productImage" mode="aspectFill" />
            </div>
            <div class="ml-12rpx flex-1">
              <div>{{ item.productName }}</div>
              <div class="text-24rpx text-hex-999">{{ item.productIntro ?? item.productName }}</div>
              <div class="text-24rpx text-hex-999">存库：{{ item.stock??0 }}</div>
              <div class="flex items-center justify-between">
                <div class="font-numberFont text-hex-ff4d4e">￥{{ item.productPrice }}</div>
                <div class="mt-10rpx">
                  <image
                    :src="`${cdnUrl}//svgicons/home/add.svg${imgVersion}`"
                    mode="scaleToFill"
                    class="h-66rpx w-66rpx"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="flex flex-col items-center justify-center">
            <image
              :src="`${cdnUrl}/imgs/noOpen/noText.png${imgVersion}`"
              mode="scaleToFill"
              class="h-300rpx w-300rpx"
            />
            <div class="mb-64rpx text-28rpx text-hex-7C8699">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useSearchStore } from '../stores/history'
import { useAddressStore } from '@/stores/address'
import { useUserStore } from '@/stores/user'

let searchStore: any = useSearchStore()
let searchVal = $ref('')
let addressStores: any = useAddressStore()
let { user } = useUserStore()
let searchBarTop: any = $ref('24')
let rightBar: any = $ref()
onLoad((options) => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
  if (options) {
    searchVal = options.q
  }
})
let pageNo = $ref(1)
let totalPage = $ref()
const getList = async () => {
  const { data, error, status } = await Fetch('/qqyapi/product/product/search/list', {
    method: 'post',
    headers: {
      AppType: 2,
      userId: user.id,
    },
    data: {
      appType: 2,
      keyWord: searchVal,
      pageNo,
      pageSize: 10,
      storeId: addressStores.selectStores.id,
    },
  })
  if (status === 200 && data.code === 0) {
    totalPage = data.result.totalPage
    goodsList = [...goodsList, ...data.result.list] as any
  }
}
//下滑加载更多数据
const getMoreData = () => {
  if (totalPage !== pageNo) {
    pageNo++
    getList()
  }
}
onReachBottom(() => {
  getMoreData()
})
onMounted(() => {
  getList()
})
const onKeyboardConfirm = (e) => {
  if (e.detail.value.trim() === '') {
    return
  }
  let tempHistory = searchStore.teaSearchHistoryList
  tempHistory.unshift(searchVal)
  tempHistory = [...new Set(tempHistory)]
  searchStore.updateteaSearchHistoryList(tempHistory)
  navTo(`/pages-tea/searchResult?q=${searchVal}`)
  searchVal = ''
}
let goodsList: any = $ref([])

const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<style lang="scss">
.goodsClassdetails {
  .textHide2 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .textdecor {
    text-decoration: line-through;
  }
}
</style>
